<script setup lang="ts">
import { ref, Ref, inject, onBeforeMount } from 'vue'
import { PostDto, PageInfo, Comment, popMessage, popMessageKey } from "@/type"
import { getOnePost, getComments } from '@utils/api';
import Post from './Post.vue'
import PostComment from './PostComment.vue';
import CommentList from '@components/Comment/CommentList.vue';

const popMessage = inject(popMessageKey) as popMessage
const currentPage = ref(1)
const post = ref([]) as Ref<PostDto[]>
const commentPageInfo = ref<PageInfo<Comment>>()
const props = defineProps<{
    postId: string
}>()

const getc = () => {
    getComments(props.postId, 'p', currentPage.value, 10, false).then((res) => {
        commentPageInfo.value = res.data.data
    })
}

onBeforeMount(() => {
    getOnePost(props.postId).then((res) => {
        post.value.push(res.data.data)
    })
    getc()

})



</script>

<template>
    <div class="warp">
        <Post :post-list="post" :switch-show="() => { }" />
        <PostComment :post-id="props.postId" :is-show="true" :show-more="false" :show-comment="false" />
        <h4>热门评论</h4>
        <CommentList :key="commentPageInfo?.total" :by-likes="true" :type-id="props.postId" :type="ref('p')" />
        <br>
        <h4>最新评论</h4>
        <CommentList :key="commentPageInfo?.total" :by-likes="false" :type-id="props.postId" :type="ref('p')" :show-pagenation="true" />
        
    </div>
</template>

<style scoped lang="css">
.warp {
    margin: 40px 120px;
}
h4 {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
</style>